<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>白鹿为霜</title>
	<style type="text/css">
		body{
			margin: 0;/*外边距  上下 左右*/
		}
		.heart{
			position: relative;
			width: 250px;
			height: 250px; 
			margin: 60px auto;
		}
		.heart:before{
			content: "";/*激活伪元素必要因素*/
			position: absolute;/*绝对定位属性  不受父级约束 */
			top: 0;
			left: 0;
			width: 100px;
			height: 160px;
			background-color: red;
			border-radius: 50px 50px 0px 0px;
			
			transform: rotate(-45deg);/*旋转 -左 +右*/
		}
		/*before和after在元素内容前后加入指定内容（伪类）*/
		.heart:after{
			content: "";/*激活伪元素必要因素*/
			position: absolute;/*绝对定位属性  不受父级约束 */
			top: 0;
			left: 0;
			width: 100px;
			height: 160px;
			background-color: red;
			border-radius: 50px 50px 0px 0px;
			transform: translate(43px) rotate(45deg);
		}
	</style>
</head>
<body>
	<div class="heart"></div>
 
</body>
</html>